<template>
  <div class="app">
    <div class="fruitItem" v-for="item in fruitList" :key="item.id">
      <div class="left">
        <input type="checkbox" name="" id="" :checked="item.check" @change="tagger(item.id)">
        <span span>{{item.name}}</span>
      </div>
      <div class="right">
        <span>价格：{{item.price}}/斤</span>
        <div>
          <button @click="add(item.id)">+1</button>
          <button @click="lessen(item.id)">-1</button>
          <span>数量：{{item.count}}</span>
        </div>
      </div>
    </div>
    <div>合计：{{sumPrice}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fruitList: [
        {
          id: 1,
          name: '香蕉',
          price: 5,
          count: 0,
          check: false
        },{
          id: 2,
          name: '苹果',
          price: 8,
          count: 0,
          check: false
        },{
          id: 3,
          name: '草莓',
          price: 40,
          count: 0,
          check: false
        },{
          id: 4,
          name: '西瓜',
          price: 20,
          count: 0,
          check: false
        }
      ]
    }
  },
  computed: {
    sumPrice() {
      let sum = 0
      this.fruitList.forEach(item => {
        if(item.check) {
          sum += item.price * item.count
        }
      })
      return sum
    }
  },
  methods: {
    add(id) {
      this.fruitList.some(item => {
        if(id === item.id) {
          item.count ++
        }
      })
      // console.log(this.fruitList)
    },
    lessen(id) {
      this.fruitList.some(item => {
        if(id === item.id) {
          if(item.count !== 0) {
            item.count --
          }
        }
      })
    },
    tagger(id) {
      this.fruitList.some(item => {
        if(id === item.id) {
          item.check = !item.check
        }
      })
    }
  }
}
</script>

<style scoped>
  .app{
    margin: 100px auto;
    height: 600px;
    width: 300px;
    border: 1px solid #ccc;
  }
  .fruitItem{
    width: 100%;
    height: 100px;
    display: flex;
  }
  .left{
    flex: 0.4;
    display: flex;
    align-items: center;
  }
  .right{
    flex: 0.6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
</style>